<template>
	<el-table-column v-if="type !== 'options'" v-bind="attrs">
		<template slot-scope="{ row, $index }">
			<slot :row="row" :index="$index">
				<template v-if="type === STRING || type === NUMBER">
					{{ row[prop] | rowPropType(type) }}
				</template>
				<template v-else-if="type === INDEX">
					{{ $index + 1 }}
				</template>
				<template v-else-if="type === IMAGE">
					<el-image :preview-src-list="[row[prop]]" :src="row[prop]" class="w-[50px] !h-[50px]"></el-image>
				</template>
				<template v-else-if="type === IMAGE_ARRAY">
					<div class="flex flex-wrap">
						<el-image v-for="(url, index) in getImageArray(row[prop])" :key="index" :preview-src-list="[url]" :src="url" class="w-[50px] !h-[50px] mr-[10px]"></el-image>
					</div>
				</template>
				<template v-else-if="type === TIME">
					<div class="w-full flex flex-col items-center">
						<span>{{ dayjs(row[prop]).format('YYYY-MM-DD') }}</span>
						<span>{{ dayjs(row[prop]).format('HH:mm:ss') }}</span>
					</div>
				</template>
				<template v-else-if="type === SWITCH">
					<el-switch v-model="row[prop]" class="switch" v-bind="switchOptions" @change="$emit('change', { value: $event, row })"></el-switch>
				</template>
				<template v-else-if="type === SORT">
					<el-button :circle="true" class="sortOrder" icon="el-icon-caret-top" size="mini" type="primary" @click="$emit('reSortOrderReduce', row)"></el-button>
					<el-button :circle="true" class="sortOrder" icon="el-icon-caret-bottom" size="mini" type="primary" @click="$emit('reSortOrderPlus', row)"></el-button>
				</template>
			</slot>
		</template>
	</el-table-column>
	<el-table-column v-else :width="attrs.width" align="center" fixed="right" header-align="center" label="操作">
		<template slot-scope="scope">
			<div class="table-action flex justify-center">
				<slot :row="scope.row" />
			</div>
		</template>
	</el-table-column>
</template>

<script>
import dayjs from 'dayjs';
const STRING = 'string';
const NUMBER = 'number';
const IMAGE = 'image';
const IMAGE_ARRAY = 'image-array';
const TIME = 'time';
const SWITCH = 'switch';
const INDEX = 'index';
const SORT = 'sortOrder';
export default {
	name: 'Column',
	filters: {
		rowPropType(val, type) {
			if (type === 'number') {
				return val ?? 0;
			}
			return val ?? '-';
		},
	},
	props: {
		//字段
		prop: {
			type: String,
			default: '',
		},
		//名称
		label: {
			type: String,
			default: '',
		},
		//类型
		type: {
			type: String,
			default: 'string',
		},
		//水平方式
		align: {
			type: String,
			default: 'center',
		},
		//最小宽度
		minWidth: {
			type: [Number, String],
			default: 120,
		},
		//排序
		sortable: {
			type: Boolean,
			default: false,
		},
		//定位
		fixed: {
			type: Boolean,
			default: false,
		},
		//switch参数配置
		switchOptions: {
			type: Object,
			default: () => {
				return {};
			},
		},
	},
	data() {
		return {
			dayjs,
			STRING,
			NUMBER,
			IMAGE,
			IMAGE_ARRAY,
			TIME,
			SWITCH,
			INDEX,
			SORT,
		};
	},
	computed: {
		formatterData() {
			if (this.type === 'number') {
				return this.emptyToNumber;
			}
			return this.emptyToString;
		},
		formatterType() {
			return this.type === 'index' ? 'index' : null;
		},
		attrs() {
			return {
				type: this.formatterType,
				formatter: this.formatterData,
				align: this.align,
				label: this.label,
				prop: this.prop,
				minWidth: this.type === TIME ? 156 : this.minWidth,
				sortable: this.sortable,
				fixed: this.fixed,
				...this.$attrs,
			};
		},
	},
	methods: {
		getImageArray(data) {
			if (Array.isArray(data)) {
				return data;
			}
			return data.split(',');
		},
	},
};
</script>

<style scoped lang="scss">
.sortOrder {
	background: #ffffff;
	border-color: #cccccc;
	color: #86909c;
}

.sortOrder .el-icon-caret-top {
	color: #cccccc;
}

.sortOrder .el-icon-caret-bottom {
	color: #cccccc;
}
</style>
